tags: iThome 鐵人賽 30天

Switch

Switch裡面會包著多個Route但並不是全部都符合都會渲染，而是會只渲染第一個符合的Route，所以當都沒有路徑符合的時候就代表全部都不會被渲染。

在使用前一樣要先從react-router-dom引用出來：

import { Switch } from 'react-router-dom'

沒有Switch但路徑都符合，都會被渲染：

<Route exact path="/watch">影片標記</Route>
<Route path="/">首頁</Route>

影片標記與首頁都被印出來

有Switch但路徑都符合，只有第一個符合的會被渲染：

<Switch>
    <Route exact path="/watch">影片標記</Route>
    <Route path="/">首頁</Route>
</Switch>

只有影片標記被印出來

Redirect

Redirect是只要執行了，不管是甚麼路徑都會轉跳到Redirect指定的路徑，所以通常都放用在Switch的最尾巴，當完全沒有符合的路徑時轉跳到指定路徑 (通常為首頁、錯誤頁面)。

引用Redirect：

import { Redirect } from 'react-router-dom'

使用範例，當路徑不在規範時轉跳回首頁：

<Switch>
    <Route exact path="/watch">影片標記</Route>
    <Route path="/">首頁</Route>
    <Redirect to="/" />
</Switch>

輸入不在規畫內的路徑：

按下Enter後會發現被轉跳回首頁：

後記

再來要把卡片包進一個Container (容器) 來達到我們要的排版形式，並可以開始把影片介面開工啦！

附上專案：2022-iThomeIronman

對資安或Mapbox有興趣的話也可以觀看我們團隊的鐵人發文喔~

• 資安新人30
• 打造你的主題地圖！Mapbox 也可以！(ft. React)